<template>
  <van-icon :color="value ? '#3296fa':'#777'" @click="onCollect" :name="value ? 'star':'star-o'" :class="{'collected':value}" />
</template>
<script>
import { AddCollectArticle,DeleteCollectArticle } from "@/api/article"
export default {
    name:"CollectArticle",
    data(){
        return{  }
    },
    props:{
        value:{
            type:Boolean,
            default:false
        },
        articleId:{
            type:[String,Number,Object],
            required:true
        }
    },
    methods:{
        // 添加、取消收藏
        async onCollect(){
            try {
                if(this.value){
                    // 取消收藏
                    await DeleteCollectArticle(this.articleId)
                }else{
                    // 添加收藏
                    await AddCollectArticle(this.articleId)
                }
                //更新视图
                this.$emit('input',!this.value)
                // 提示框
                this.$toast.success(!this.value ? '收藏成功':'取消成功')
            } catch (error) {
                this.$toast('操作失败，稍后重试')
            }
        }
    }
}
</script>
<style scoped>
</style>